<template>
  <div>
    <el-card>
    <el-tag type="success">合肥市辖区实时更新气象数据(每一分钟更新)</el-tag>
      <el-table :data="weatherInfo" style="width: 100%" border stripe height="700">
        <el-table-column prop="adcode" label="城市代码" width="180" />
        <el-table-column prop="city" label="辖区名称" width="180" />
        <el-table-column prop="weather" label="天气" />
         <el-table-column prop="temperature" label="气温" />
         <el-table-column prop="humidity" label="湿度" />
         <el-table-column prop="winddirection" label="风向" />
         <el-table-column prop="windpower" label="风力" />
         <el-table-column prop="reporttime" label="监测时间" />
      </el-table>

    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { getWeatherInfo } from "@/networks/weatherReq.js";
// 合肥市辖区城市代码
const cityCode = [340100, 340102, 340103, 340104, 340111];
const weatherInfo = reactive([]);
const getInfo = async () => {
  for (let i = 0; i < cityCode.length; i++) {
    const { data: res } = await getWeatherInfo({
      key: "f58766337111f56d9101db384fbea982",
      city: cityCode[i] + "",
      extensions: "base",
      output: "JSON",
    });
    weatherInfo[i] = res.lives[0];
  }
};
// 每1分钟更新一次
getInfo();
setInterval(() => {
  getInfo();
  // console.log("更新了")  
}, 1000*60);

// console.log(weatherInfo);
</script>

<style lang="less" scoped>
.el-card {
  height: calc(100vh - 3rem);
}
.el-tag{
    width: 100%;
    text-align: center;
    height: 2rem;
    margin: 10px 0;
    font-size: 1rem;
}
</style>
